<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div v-if="props.visible">
    <contentModel v-if="visible" title="编辑" @close="handleedit">
      <template #title> 编辑 </template>
      <div class="elfrom">
        <a-form ref="formRef" :model="form" layout="vertical" :rules="rules">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="secretLevel"
                label="密级"
                disabled
                label-col-flex="400px"
              >
                <secretLevelSelect v-model="form.secretLevel" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="categoryCode"
                label="品类编码"
                label-col-flex="300px"
              >
                <a-input v-model="form.categoryCode" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                field="categoryName"
                label="品类名称"
                label-col-flex="400px"
              >
                <a-input v-model="form.categoryName" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="categoryCode"
                label="采购大类"
                label-col-flex="300px"
              >
                <a-input v-model="form.categoryCode" disabled /></a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                field="categoryHierarchy"
                label="采购品类层级
"
                label-col-flex="400px"
              >
                <a-input v-model="form.categoryHierarchy" disabled />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="parentCategoryCode"
                label="父级品类编码"
                label-col-flex="300px"
              >
                <a-input
                  v-model="form.parentCategoryCode"
                  disabled /></a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                field="parentCategoryName"
                label="父级品类名称"
                label-col-flex="400px"
              >
                <a-input v-model="form.parentCategoryName" disabled />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="preparedBy"
                label="申请人"
                label-col-flex="300px"
              >
                <searchItemUser
                  v-model="form.preparedBy"
                  v-model:name="form.name"
                  :title="'申请人'"
                  @update:item="handleUserChange($event, rowIndex)"
                  @hander-clear="handerClear" /></a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                field="categoryZero"
                label="零级品类"
                label-col-flex="400px"
              >
                <DictSelect
                  v-model="form.categoryZero"
                  dict-type="zeroLevelCategory"
                  placeholder="请选择"
                  disabled
                ></DictSelect>
              </a-form-item>
            </a-col>
            <a-col :span="12"> </a-col>
          </a-row>
        </a-form>
      </div>
      <template #footer>
        <a-button @click="handleedit">取消</a-button>
        <a-button type="primary" @click="handleOkedit">保存</a-button>
      </template>
    </contentModel>
  </div>
</template>

<script setup lang="ts">
  import { defineAsyncComponent, ref, watch } from 'vue';
  import { updateAPIRecord } from '@/api/Basimanagementapi/categorymanagement';
  import searchItemUser from '@/common/components/search-modal/user.vue';
  import DictSelect from '@/common/components/dict-select/index.vue';
  import secretLevelSelect from '@/common/components/cac-components/secret-level-select/index.vue';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const props = defineProps({
    visible: {
      type: Boolean,
      default: () => false,
    },
    title: {
      type: String,
    },
    modadata: {
      type: Object,
      default: null,
    },
  });
  const form = ref();
  const rules = {
    categoryName: [{ required: true, message: '请输入品类编码' }],
    preparedBy: [{ required: true, message: '请选择申请人' }],
  };

  watch(
    () => props.visible,
    (newValue) => {
      if (newValue) {
        form.value = {
          secretLevel: props.modadata.secretLevel,
          categoryCode: props.modadata.categoryCode,
          categoryName: props.modadata.categoryName,
          categoryHierarchy: props.modadata.categoryHierarchy,
          parentCategoryCode: props.modadata.parentCategoryCode,
          parentCategoryName: props.modadata.parentCategoryName,
          categoryZero: props.modadata.categoryZero,
          preparedBy: props.modadata.preparedBy,
          id: props.modadata.id,
        };
      }
    }
  );
  const emit = defineEmits(['handleedit', 'handleOkedit']);
  const handleedit = () => {
    // visible1.value = false;
    emit('handleedit');
  };
  const handleUserChange = (v: string, index: number) => {
    console.log(v, index, '================>SS');
    // eslint-disable-next-line no-underscore-dangle
    form.value.username = v._rawValue.username;
    // eslint-disable-next-line no-underscore-dangle
    form.value.preparedBy = v._rawValue.userCode;
  };
  // 筛选弹出清除
  const handerClear = () => {
    console.log('ssss');
  };
  const handleOkedit = async () => {
    const formValue = {
      secretLevel: form.value.secretLevel,
      categoryName: form.value.categoryName,
      preparedBy: form.value.preparedBy,
      id: form.value.id,
    };
    const data1 = await updateAPIRecord(formValue);
    console.log(data1);
    emit('handleOkedit');
  };
</script>

<style scoped lang="less">
  .elfrom {
    width: 1000px;
  }
</style>
